<template>
    <!-- 自然资源分布图 -->
    <div class="box">
        <div class="top-bar">
            <div class="title">自然资源分布图：</div>
            <div class="btn-box flex">
                <div class="btn pointer" :class="{ active: selected == 1 }" @click="choose(1)">风能利用潜力分布图</div>
                <div class="btn pointer" :class="{ active: selected == 2 }" @click="choose(2)">太阳能利用潜力分布图</div>
            </div>
        </div>

        <div class="content flex-al-center flex_center">
            <div class="fdj" @mousemove="mousemove" @mouseleave="moveOut">
                <div class="small" ref="small">
                    <div class="tools pointer" @click="ctrlFdj">
                        <i class="el-icon-zoom-in"></i>
                        <div>放大镜</div>
                    </div>
                    <img src="@/assets/site/p1.jpg" alt="" v-if="selected == 1">
                    <img src="@/assets/site/p2.jpg" alt="" v-else>
                    <div class="mask" :style="{ 'left': left + 'px', 'top': top + 'px', }" ref="mask"></div>
                </div>
                <div class="big" ref="big" v-show="showFdj"
                    :style="{ 'left': boxLeft + left + 'px', 'top': boxTop + top + 'px', }">
                    <img ref="bigimg" v-if="selected == 1" src="@/assets/site/p1.jpg" alt=""
                        :style="{ 'left': imgX + 'px', 'top': imgY + 'px', }" />
                    <img ref="bigimg" v-else src="@/assets/site/p2.jpg" alt=""
                        :style="{ 'left': imgX + 'px', 'top': imgY + 'px', }" />
                </div>

            </div>

        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selected: 1,
            showFdj: false,
            top: '',
            left: '',
            imgX: '',
            imgY: '',
            boxLeft: "",
            boxTop: "",
        }
    },
    methods: {
        ctrlFdj() {
            this.showFdj = !this.showFdj
        },
        handerPictu(e) {
            const img = this.$refs.bigimg
            console.log(23)
            this.imgWidth = img.offsetWidth || img.width || img.clientWidth;
            this.imgHeight = img.offsetHeight || img.height || img.clientHeight;
            if (e.deltaY > 0) {
                console.log("鼠标向下滚动，图片缩小");
                this.imgWidth = `${this.imgWidth - 10}px`;
                this.imgHeight = `${this.imgHeight - 10}px`;
            } else {
                console.log("鼠标向上滚动，图片放大");
                this.imgWidth = `${this.imgWidth + 10}px`;
                this.imgHeight = `${this.imgHeight + 10}px`;
            }
        },
        choose(val) {
            this.selected = val
        },
        moveOut() {
            document.body.style.cursor = "auto";
        },
        mousemove(e) {
            if (!this.showFdj) return
            document.body.style.cursor = "none";
            let small = this.$refs.small
            let mask = this.$refs.mask
            let big = this.$refs.big
            let bigimg = this.$refs.bigimg
            this.boxLeft = small.offsetLeft
            this.boxTop = small.offsetTop
            // 第一步获取鼠标中点位置
            let maskX = e.pageX - small.offsetLeft
            let maskY = e.pageY - small.offsetTop
            // 让鼠标出现在mask的中心点
            maskX = maskX - mask.offsetWidth / 2;
            maskY = maskY - mask.offsetHeight / 2;
            // 把mask限制到box中
            maskX = maskX < 0 ? 0 : maskX;
            maskY = maskY < 0 ? 0 : maskY;
            maskX = maskX + 200 > small.offsetWidth ? small.offsetWidth - 200 : maskX;
            maskY = maskY + 200 > small.offsetHeight ? small.offsetHeight - 200 : maskY;
            //遮挡层的移动距离/大图的移动距离=遮挡层的最大移动距离/大图的最大移动距离
            //大图的移动距离=遮挡层的移动距离*大图的最大移动距离/遮挡层的最大移动距离
            // 注意：
            // 遮罩层的面积/盒子的面积 == 大图展示盒子的面积/大图图片的面积
            // 一定要是等比例的才行严格控制样式
            let bigImgX = maskX * (big.offsetWidth - bigimg.offsetWidth) / (small.offsetWidth - mask.offsetWidth);
            let bigImgY = maskY * (big.offsetHeight - bigimg.offsetHeight) / (small.offsetHeight - mask.offsetHeight)

            this.left = maskX
            this.top = maskY
            this.imgX = bigImgX
            this.imgY = bigImgY

            //  控制遮罩层以及右边大图的显示隐藏 这个自己用事件移入跟移除做一下display: none或者v-if控制；过于简单这里就不做这个了。

        }
    }
}
</script>

<style lang="scss" scoped>
body,
html {
    padding: 0;
    margin: 0;
}

.box {
    background-color: #000C38;
    height: 90.7vh;
    overflow: auto;
    box-sizing: border-box;
    padding: 27px;
}

.tools {
    position: absolute;
    right: -100px;
    padding: 10px 13px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #2D57D2;
    border-radius: 5px 5px 5px 5px;
    font-size: 18px;
    color: #FFFFFF;

    i {
        text-align: center;
        font-size: 32px;
    }
}

.top-bar {
    padding: 27px;
    background: #172C69;
    border-radius: 5px 5px 5px 5px;
    margin-bottom: 27px;

    .title {
        font-size: 27px;
        font-weight: 500;
        color: #FFFFFF;
        margin: 0 0 21px 0;
    }

    .btn-box {
        .btn {
            padding: 8px 53px;
            margin-right: 21px;
            background-color: #4057eb31;
            border-radius: 5px 5px 5px 5px;
            font-size: 27px;
            color: #FFFFFF;
            line-height: 31px;
        }

        .active {
            background: #2D57D2;
        }
    }
}

.content {
    // height: 500px;
    padding: 13px 0;
    background-color: #172C69;
}

.fdj {
    width: 800px;

}

.small {
    width: 800px;
    position: relative;
}

.small img {
    width: 100%;
    height: 100%;
}

.big {
    width: 200px;
    height: 200px;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #2D57D2;
}

.big img {
    position: absolute;
    width: 1600px;
    left: 0;
    top: 0;
}

.mask {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0px;
    left: 0px;
}
</style>
  